{% extends 'base.html' %}

{% load static %}

{% block title %}Post a reply{% endblock %}

{% block stylesheet %}
  <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
  {% if recaptcha_enabled %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
     function onSubmit(token) {
       document.getElementById("replyTopicForm").submit();
     }
    </script>
  {% endif %}
  <script src="{% static 'js/simplemde.min.js' %}"></script>
  <script>
    var simplemde = new SimpleMDE();
  </script>
{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
  <li class="breadcrumb-item"><a href="{% url 'board_topics' topic.board.pk %}">{{ topic.board.name }}</a></li>
  <li class="breadcrumb-item"><a href="{% url 'topic_posts' topic.board.pk topic.pk %}">{{ topic.subject }}</a></li>
  <li class="breadcrumb-item active">Post a reply</li>
{% endblock %}

{% block content %}

  <form method="post" id="replyTopicForm" class="mb-4" novalidate>
    {% csrf_token %}
    {% include 'includes/form.html' %}
    {% if recaptcha_enabled %}
      <button class="g-recaptcha btn btn-success" data-sitekey="{{ recaptcha_site_key }}" data-callback='onSubmit'>Post a reply</button>
    {% else %}
      <button type="submit" class="btn btn-success">Post a reply</button>
    {% endif %}
  </form>

  {% for post in topic.get_last_ten_posts %}
    <div class="card mb-2">
      <div class="card-body p-3">
        <div class="row mb-3">
          <div class="col-6">
            <strong class="text-muted">{{ post.created_by.username }}</strong>
          </div>
          <div class="col-6 text-right">
            <small class="text-muted">{{ post.created_at }}</small>
          </div>
        </div>
        <div class="post-body">
          {{ post.get_message_as_markdown }}
        </div>
      </div>
    </div>
  {% endfor %}

{% endblock %}
